<template>
	<view class="warp" >
		<view class="" >
			<view class="survery">
				<view class="title">
					{{title}}
				</view>
				<!-- <view class="intaduce">
					此次问卷调查。。
				</view> -->
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="i_title">
					{{index+1}}.	{{item.titleName}}
					</view>
					<view class="po_list">
						<view @click="choose(item,index,items,idx)" class="po_item" v-for="(items,idx) in item.optionsVOList" :key="idx">
							<span style="margin-right: 30rpx;" v-if="items.isok==true"><uni-icons type="checkmarkempty" color="#00a0e9" size="24"></uni-icons></span>
							<span style="margin-right: 30rpx;" v-if="items.isok==false"><uni-icons type="circle" color="#282828" size="12"></uni-icons></span>
							<view class="index">
								{{String.fromCharCode(idx +'A'.charCodeAt() )}}.
							</view>
							<view class="value">
								{{items.optionsName}}
							</view>
							<view class="bai" style="margin-left: 30rpx;color: #feb858;padding: 10rpx;">
								{{items.proportion}}
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="submit" @click="submitfn" v-if="show">
			提交问卷
		</view>
		<view class="" style="margin-bottom: 25%;">
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				title:'',
				 show:true,
				problemoptions:[],
				problemtitle:'',
				
				list:[],//问卷题目
				addarry:[],
				
				// 
			};
		},
		onLoad(options) {
			this.id=this.$Route.query.id
			this.getsurveyinfo()
			// 判断是否已经提交
			if(uni.getStorageSync('submitId')){
				if(uni.getStorageSync('submitId')==this.id){
					this.show=false
				}
			}
			 uni.showLoading({
			 	title: this.$L('加载中'),
			 	icon: 'none'
			 })
		},
		onShareAppMessage:function(){
			let pathinfo='/extra/questionnaireinfo/questionnaireinfo?id='+this.id
			return{
				title: this.title,
				path:pathinfo,
				imageUrl: "https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/add.jpg",
			}
			
		},
		onShareTimeline: function() {
			let pathinfo='/extra/questionnaireinfo/questionnaireinfo?id='+this.id
			return{
				title: this.title,
				path:pathinfo,
				imageUrl: "https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/add.jpg",
			}
		},
		methods:{
			// 获取问卷	
			getsurveyinfo(){
				this.$request({
					url:'v3/survey/front/title/detail?tSurveyId='+this.id,
					method:"GET"
				}).then(res=>{
					if(res.state==200){
						this.title=res.data.surveyName
						this.list=res.data.titleList
						 this.list.forEach(item=>{
							 item.optionsVOList.forEach(val=>{
								 val.isok=false
							 })
						 })
						 uni.hideLoading();
					}
				})
			},
			choose(val,num,vals,idx){
				// 如果已经提交
				if(!this.show){
					uni.showToast({
						title:"感谢您的参与，请勿重复提交",
						icon:'none'
					})
				}else{
					if(!vals.isok){
						vals.isok=true
						this.$set(this.list[num].optionsVOList,idx,vals)
					    this.addarry.push({sTitleId:val.titleId,sOptionsId:vals.optionsId})
					}else{
						vals.isok=false
						this.$set(this.list[num].optionsVOList,idx,vals)
						this.addarry.forEach((item,index)=>{
							if(item.sOptionsId==vals.optionsId){
								this.addarry.splice(index,1)
							}
						})
					}
				}
			
				
				// console.log(val,num,vals,idx,this.addarry);
			},
			// 提交问卷
			submitfn(){
				
				this.$request({
					url:'v3/survey/front/user/add',
					method:'POST',
					header:{
					  'Content-Type': 'application/json'
					},
					data:this.addarry
				}).then(res=>{
					if(res.state==200){
						uni.showToast({
							title:'感谢您的参与',
							icon:'none'
						})
						this.getsurveyinfo()
						this.show=false
						uni.setStorageSync('submitId',this.id)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/index/index"
							})
						},2000)
						
						
					}
				})
			}
		
			
		}
	}
</script>

<style lang="scss" scoped>
page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
	.warp{
		overflow: hidden;
		background: #F5F5F5;
		.survery{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			border-top: 2rpx solid #cecece;
			.title{
				text-align: center;
				padding: 20rpx;
				font-size: 39rpx;
				color: #feb858;
			}
			.intaduce{
				text-align: center;
				padding: 20rpx;
				font-size: 24rpx;
				color: #cecece;
			}
		}
		
		
	
		.submit{
			position: fixed;
			bottom: 10rpx;
			left: 225rpx;
			width: 300rpx;
			height: 80rpx;
			background-color: #feb858;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 40rpx;
			
		}
		// 
		.list{
			background-color: #fff;
			margin-top: 10rpx;
			.item{
				border-bottom: 2rpx solid #cecece;
				padding: 20rpx;
				.i_title{
					color: #feb858;
					padding: 10rpx;
					// border-bottom: 2rpx solid #e5e5e5;
				}
				.po_list{
					padding: 10rpx;
					.po_item{
						display: flex;
						align-items: center;
						padding: 10rpx;
						.index{
							margin-right: 10rpx;
						}
						
					}
				}
			}
		}
		
		
	}
</style>
